<template>
  <div class="vendor_box">
    <div
      style="padding: 0 20px; min-height: 1219px"
      v-loading="signalsRadio1.loading"
      element-loading-text="加载中..."
    >
      <div
        v-if="kong !== 1"
        class="vendor"
        v-for="(item, index) in forecastsLiss"
        :key="index"
      >
        <div class="vendor_cen">
          <div>{{ item.key }}</div>
        </div>
        <div class="vendor_btn">
          <div style="margin-bottom: 10px">
            <span style="color: #f43107; font-size: 16px; margin-right: 10px"
              >预测原因</span
            >
            <span
              >六度标讯大数据：该公司过往采购历史中，平均间隔
              {{ item.info_list.yuce.m }} 月会采购一次
              <div style="color: #f43107; display: inline-block">
                {{ item.key }}
              </div>
            </span>
          </div>
          <div>
            <!-- <div style="position: relative; display: flex;">
                            <div v-for="(ele, index) in item.info_list.list" :key="index">
                                <div >{{ timestamp(ele.release_time).substring(0, 7) }}</div>
                                <span class="yuand">
                                        <span class="yuandN"></span>
                                </span>
                                <p class="stepLine"></p>
                                <div>采购</div>
                            </div>
                        </div> -->
            <ul class="flexStart">
              <li
                style="position: relative; display: flex"
                v-for="(ele, index) in item.info_list.list"
                :key="index"
              >
                <div class="flexColumn stepsCon lastStep">
                  <p class="date">{{ timestamp(ele.release_time) }}</p>
                  <span class="yuand">
                    <span class="yuandN"></span>
                  </span>
                  <p class="stepLine"></p>
                  <p class="name">
                    采购
                    <span class="smName" @click="titleClick(ele.nid)">{{
                      item.key
                    }}</span>
                  </p>
                </div>
                <!-- {{ index }} -->
              </li>
              <div
                style="
                  display: inline-block;
                  margin: 10px 10px 0 10px;
                  color: #f43107;
                "
              >
                预计
              </div>
              <li style="position: relative; display: flex">
                <div class="flexColumn stepsCon lastStep">
                  <p class="date">
                    {{ timestamp(list[index].time).substring(0, 7) }}
                  </p>
                  <span class="yuand">
                    <span class="yuandN"></span>
                  </span>
                  <p class="stepLine"></p>
                  <p class="name">
                    采购
                    <span class="smName" @click="titleClick(ele.nid)">{{
                      item.key
                    }}</span>
                  </p>
                </div>
                <!-- {{ index }} -->
              </li>
            </ul>

            <!-- <div v-for="item1 in item.info_list.yuce">{{ item1.release_time }}</div> -->
            <!-- <div style="display: inline-block;">预计</div> -->
          </div>
        </div>
      </div>
      <div v-else style="text-align: center; line-height: 200px">暂无数据</div>
    </div>
    <!-- <Pagination ref="pagination" /> -->
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { timestamp } from "@/utils/index";
import { ElMessage } from "element-plus";
import { InfoFilled } from "@element-plus/icons-vue";
import Pagination from "@/components/pagination/index.vue";
import { useRadio1Store } from "@/pain/search/search";
import { useRouter } from "vue-router";
import { forecast } from "@/api/forecast/index.js";
import { useCounterStore } from "@/pain/login/login";
const useRouters = useCounterStore();
const router = useRouter();
const forecastsLiss = ref();
const signalsRadio1 = useRadio1Store();
const company_name = signalsRadio1.$state.company_name;
// console.log(signalsRadio1.$state.company_name);

const titleClick = (nid) => {
  console.log(nid);
  // if (!localStorage.getItem("token")) {
  //     return (useRouters.uselogin = true);
  // }

  // if (signalsRadio1.routerPush == 'search') {
  const href = router.resolve({
    path: `/searchInfo/${nid}`,
  });
  window.open(href.href, "_blank");
  // }
};
const form = {
  // company_name:'中铁建工集团有限公司'
  company_name: company_name,
};
const kong = ref();
const list = reactive([]);
forecast(form).then((res) => {
  if (res.data.code == 1) {
    forecastsLiss.value = res.data.data;
    if (res.data.data.length == 0) {
      kong.value = 1;
    }
    res.data.data.forEach((element) => {
      list.push({ time: element.info_list.yuce.release_time });
      // console.log(element.info_list.yuce.release_time);
    });
    // console.log(forecastsLiss.value,'500',list);
  } else {
    ElMessage.error(res.data.msg);
  }
});
</script>

<style lang="scss" scoped>
p {
  color: #9b9eac;
  line-height: 12px;
}

.mr46 {
  margin-right: 46px;
}

.flexStart {
  display: flex;
  justify-content: flex-start;
  margin-top: 26px;
  margin-left: 75px;
}

.stepsCon {
  position: relative;
  width: 100px;
  align-items: center;
  cursor: pointer;
}

.date {
  display: flex;
  justify-content: center;
  font-size: 12px;
  line-height: 10px;
  min-height: 10px;
}

.stepLine {
  width: 100%;
  height: 1px;
  margin-top: -0.08rem;
  border-bottom: 1px solid #f43107;
}

.preText {
  display: none;
  position: absolute;
  left: 0;
  top: 15px;
  margin: 0 -35px;
  font-size: 12px;
  color: #f43107;
}

.preTexts {
  display: block;
  position: absolute;
  left: 0;
  top: 15px;
  margin: 0 -35px;
  font-size: 12px;
  color: #f43107;
}

.name {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px;
}

.smName {
  overflow: hidden;
  max-width: 45px;
  /* 61px */
  margin-left: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3d4461;
}

.yuand {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 14px;
  left: 45px;
  width: 15px;
  height: 15px;
  background-color: #e6e9ff;
  border-radius: 50%;

  .yuandN {
    width: 7px;
    height: 7px;
    background-color: #f43107;
    border-radius: 50%;
  }
}

.lastStep {
  cursor: default;
  // width: 150px;
}

.yc {
  display: flex;
  align-items: center;
  width: 86px;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

.origin {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #fe8d03;
  color: #fff;
  margin-left: 10px;
  font-size: 14px;
}

.vendor_box {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 500px;
  background-color: #fff;

  //
  .forecast {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 43px;
    border-bottom: 1px solid #eeeeee;

    .forecast_ck {
      height: 20px;
      line-height: 20px;
      padding: 0 10px;
      background-color: #5473da;
      border-radius: 4px;
      font-size: 12px;
      color: #fff;
    }
  }

  .vendor {
    // display: flex;
    padding-top: 20px;
    border-bottom: 1px solid #eeeeee;

    .vendor_cen {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .vendor_ico {
        display: flex;
        align-items: center;
        font-family: "Source Han Sans CN";
        font-size: 14px;
        color: #333333;
      }
    }

    .vendor_btn {
      min-height: 144px;
      padding-top: 20px;
      padding-left: 20px;
      margin: 15px 20px 20px 20px;
      background-color: #f8fafe;
    }
  }

  // .vendor_cen{
  //     display: flex;
  //     margin-bottom: 20px;
  //     .vendor_h{
  //         font-size: 16px;
  //         color: #333333;
  //     }
  // }
  .omission {
    width: 1090px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
  }
}

// ::v-deep {
//     .is-hollow {
//         background: var(--el-color-white);
//         border-style: solid;
//         border-width: 5px !important;
//     }
// }
</style>
